<template>
  <div class="mulogin">
    <div class="login">
      <van-icon name="arrow-left" size="20" color="#fff" @click="go(-1)" />
      <div class="login_first">
        <p>手机验证码登录:</p>
        <div class="login_first_once">
          <input type="text" v-model="from.phone" placeholder="请输入手机号" />
          <van-icon name="clear" size="20" @click="delet" />
        </div>
        <div class="login_first_two">
          <input
            type="password"
            v-model="from.paseword"
            placeholder="请输入验证码"
          />
          <p>获取验证码</p>
        </div>
        <div class="login_first_three">
          <p @click="dologin">登录</p>
        </div>
      </div>
    </div>
    <video
      class="videomp4"
      src="../../assets/img/loginOri.mp4"
      autoplay
      loop
    ></video>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      from: {
        phone: "",
        paseword: "",
      },
    };
  },
  methods: {
    dologin() {
      let user = /^1[3-9]\d{9}$/;
      if (!user.test(this.from.phone) || this.from.phone == "") {
        Toast({
          message: "手机号格式不正确",
          options: "请重新输入",
        });
      }

      let pwd = /^\d{6,16}$/;
      if (!pwd.test(this.from.paseword) || this.from.paseword == "") {
        Toast({
          message: "密码不正确",
        });
      }

      // 如果登陆成功后后执行的操作
      this.$http.login(this.from).then((res) => {
        console.log("登录请求结果", res);
        if (res.data.code == 2000) {
          Toast.success("登录成功");
          // 将用户对象存入vuex
          this.$store.commit("updataUser", res.data.user);
          //将token存入vuex中
          this.$store.commit("userToken", res.data.token);
          this.$router.push("/home/index");
        } else if (res.data.code == 4003) {
          Toast({
            message: "手机号或密码错误!",
          });
        } else {
          Toast({
            message: "其他错误",
          });
        }
      });
    },
    delet() {
      this.$nextTick(() => {
        this.from.phone = "";
        this.from.paseword = "";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mulogin {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .login {
    position: relative;
    z-index: 999;
    background-color: transparent;
    ::v-deep(.van-icon) {
      margin: 25px 15px;
    }
    .login_first {
      margin-top: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      p:nth-child(1) {
        margin-left: -28%;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #fff;
      }
      .login_first_once {
        width: 311px;
        height: 46px;
        background-color: rgba(158, 158, 187, 0.3);
        border-radius: 30px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        input {
          color: #fff;
          line-height: 46px;
          font-size: 16px;
        }
        ::v-deep(.van-icon) {
          top: -25%;
        }
      }
      .login_first_two {
        width: 311px;
        height: 46px;
        background-color: rgba(188, 188, 207, 0.3);
        border-radius: 30px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        input {
          color: #fff;
          line-height: 46px;
          font-size: 16px;
        }
        p {
          font-size: 16px;
          color: #fff;
          line-height: 46px;
        }
      }
      .login_first_three {
        width: 311px;
        height: 46px;
        background-color: #2dd173;
        border-radius: 30px;
        padding: 0 15px;
        p {
          font-size: 16px;
          color: #fff;
          line-height: 46px;
          margin: 0 auto;
          text-align: center;
          font-weight: 550;
        }
      }
    }
  }
  .videomp4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: none;
    z-index: 0;
  }
}
</style>
